<script setup lang="ts">
import {MaterialRequest} from "@/components/materia-outline/js/material.request";
import {SmoothDndContainer} from "@/components/smooth-dnd/SmoothDndContainer"
import {SmoothDndDraggable} from "@/components/smooth-dnd/SmoothDndDraggable"
import {ref} from "vue";
import type {MaterialType} from "@/data-type/material.type";
// 当前被拖拽的物料类型组
const dragMaterialGroup = ref<MaterialType>(null);
const materialTypeList = ref<MaterialType[]>([]);
MaterialRequest.getFormMaterial().then(v => {
  materialTypeList.value = v.data;
});
</script>

<template>
  <div>
    <div v-for="material in materialTypeList" :key="material.id" class="zhtt-material-type-group" @mousedown="()=>dragMaterialGroup = material">
      <h3>{{material.cname}}</h3>
      <SmoothDndContainer
          behaviour="copy"
          group-name="blocks"
          orientation="vertical"
          tag="div"
          class="zhtt-material-type-wrap"
          :get-child-payload="(index:number)=>{
            if(dragMaterialGroup){
              return dragMaterialGroup.children[index];
            }
          }"
      >
        <SmoothDndDraggable v-for="cmaterial in material.children" :key="cmaterial.id" class="zhtt-material-type">
          {{ cmaterial.cname }}
        </SmoothDndDraggable>
      </SmoothDndContainer>
    </div>
  </div>
</template>

<style scoped>
.zhtt-material-type-group h3 {
  border-bottom: 1px solid #f2f2f2;
  font-weight: bold;
  padding-top: 12px;
  padding-left: 12px;
  color: #555;
}

.zhtt-material-type-wrap {
  display: flex;
  flex-wrap: wrap;
}

.zhtt-material-type {
  text-align: center;
  cursor: pointer;
  vertical-align: middle;
  border: 1px solid #b2b2b2;
  border-radius: 5px;
  margin: 4px;
  padding: 4px 12px;
  background: #f9f9f9;
  font-size: 12px;
}
</style>
